<div id="content">
    <div class="row s_page_title">
        <sa-big-breadcrumbs [items]="['项目管理','项目管理日报']" icon="fa fa-smile-o" class="col-xs-12 col-sm-7 col-md-7 col-lg-4"></sa-big-breadcrumbs>
    </div>
    <sa-widgets-grid>
        <div class="s_table">
            <div sa-widget [editbutton]="false" color="darken" class="clearfix">
                <header><span class="widget-icon"> <i class="fa fa-table"></i> </span>
                    <h2>项目管理日报</h2>
                </header>
                <div>
                    <div class="widget-body no-padding">
                        <div class="page-header clearfix s_table_opreation">
                            <div class="left page-header-btn">
                                <div class="top_module">
                                    <span class="module_text">项目名称</span>
                                    <sa-company-tree companyTreeId="companyTree" (companySelected)="companySelected($event)"></sa-company-tree>
                                </div>
                                <div class="top_module top_module_box">
                                    <span class="top_module_label module_text">数值过滤</span>
                                    <select name="" class="top_module_select" [(ngModel)]="quantityType">
                                        <option value="">全部</option>
                                        <option value="0">安装数量</option>
                                        <option value="1">维修数量</option>
                                        <option value="2">现场设备</option>
                                    </select>
                                </div>
                                <!--<div class="top_module top_module_box">
                                    <span class="top_module_label module_text">排序顺序</span>
                                    <select name="" class="top_module_select" [(ngModel)]="sortType">
                                        <option value="1">由高到低</option>
                                        <option value="0">由低到高</option>
                                    </select>
                                </div>
                                <div class="top_module top_module_box">
                                    <span class="module_text">数量</span>
                                    <input type="text" class="module_inp top_module_select" [(ngModel)]="quantityType" placeholder="数量"/>
								</div>-->
                                <div class="top_module top_module_box">
                                    <span class="module_text">上传人员</span>
                                    <input type="text" class="module_inp top_module_select" [(ngModel)]="userName" placeholder="上传人员" />
                                </div>
                                <div class="top_module top_module_box">
                                    <span class="top_module_label module_text">排序</span>
                                    <select name="" class="top_module_select" [(ngModel)]="dataSort" (change)='sortChange()'>
                                        <option value="1">安装数量由高到低</option>
                                        <option value="2">安装数量由低到高</option>
                                        <option value="3">维修数量由高到低</option>
                                        <option value="4">维修数量由低到高</option>
                                        <option value="5">现场设备由高到低</option>
                                        <option value="6">现场设备由低到高</option>
                                    </select>
                                </div>
                                <div class="selectDate top_module">
                                    <div class="input-daterange input-group s_selected_time_box s_hover_box">
                                        <input type="text" [(ngModel)]='startTime' class="form-control s_selected_time" id="datetimepicker1" autocomplete="off" placeholder="选择开始时间" />
                                        <span class="s_selected_time_spe">至</span>
                                        <input type="text" [(ngModel)]='endTime' class="form-control s_selected_time" id="datetimepicker2" autocomplete="off" placeholder="选择结束时间" />
                                        <div class="s_del_icon" (click)='del_date()'>x</div>
                                    </div>

                                </div>

                                <button type="button" class="btn btn-primary" (click)="table_search()">查询</button>
                                <button type="button" class="btn btn-primary" (click)="exportData()">导出</button>
                                <button type="button" class="btn btn-primary" (click)="oneKeyChange()">{{btnText}}</button>
                            </div>
                            <!--<div class="right top-search">
								<input type="text" [(ngModel)]="searchKey" (change)="table_search()" class="search-input" placeholder="车牌号...">
								<span class="top-search-box">
							        <button class="top-search-btn" type="button" (click)="table_search()"> <i class="fa fa-search"></i></button>
							    </span>
							</div>-->
                        </div>
                        <div class="table_scroll">
                            <table class="display dataTables responsive table table-bordered table-hover dataTable s_h5_table">
                                <thead>
                                    <tr>
                                        <th>操作</th>
                                        <th>安装点</th>
                                        <th>安装数量[当天]</th>
                                        <th>维修数量</th>
                                        <th>现场设备[套]</th>
                                        <th>在途</th>
                                        <th>已安装量[总数]</th>
                                        <th>预计安装量</th>
                                        <th>安装占比</th>
                                        <th>天气</th>
                                        <th>现场人数</th>
                                        <th>安装人员</th>
                                        <th>上传人员</th>
                                        <th>代维人员</th>
                                        <th>备注</th>
                                        <th>项目名称</th>
                                        <th>地区</th>
                                        <th>时间</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- 递归遍历 可以平级 直接展示与隐藏即可-->
                                    <!-- 平级 状态标志 noShow-->
                                    <tr *ngFor="let row of tableData" [ngClass]="{'alert-flag':row.alertFlag,'active':row.isTop}"  [ngStyle]="{'background-color':row.isTop?'#bddcf3!important':'',display: row.noShow?'none':''}">
                                        <td>
                                            <button type="button" (click)="delRow(row)">删除</button>
                                            <button type="button" *ngIf="row.canEdit" (click)="editRow(row)">编辑</button>
                                        </td>
                                        <td [ngStyle]="{'padding-left': row.level*25+10+'px',cursor:row.childNode&&row.childNode.length>0?'pointer':''}" (click)="row.childNode&&row.childNode.length>0?openTr(row):''">
											<!-- 是否展示展开的按钮 -->
											<span class="arrowIcon" *ngIf="row.childNode&&row.childNode.length>0" style="color: #000!important;font-size: 15px;margin-right: 6px;">
												<i  [ngClass]="{'fa fa-caret-right':true,'down':row.isShowChild}" aria-hidden="true"></i>
												<!-- <i *ngIf="row.isShowChild" class="fa fa-caret-down" aria-hidden="true"></i>  -->
											</span>
                                            <i class="fa fa-home" *ngIf="row.isTop"></i>
                                            {{row.companyName}}
                                        </td>
                                        <td [ngStyle]="{color: '#1A6DDD',cursor: row.canEdit?'pointer':''}" (click)="row.canEdit?jumpPage('/system/car',row):''" [title]="row.canEdit?'点击查看详细':''">
                                            {{row.installedNum}}
                                        </td>
                                        <td [ngStyle]="{color: '#1A6DDD',cursor: row.canEdit?'pointer':''}" (click)="row.canEdit?jumpPage('/device-management/fault',row):''" [title]="row.canEdit?'点击查看详细':''">
                                            {{row.repairsNum}}
                                        </td>
                                        <td [ngStyle]="{color: '#1A6DDD',cursor: row.canEdit?'pointer':''}" (click)="row.canEdit?editItemPage('现场设备','fieldEquipment',row):''" [title]="row.canEdit?'点击编辑':''">
                                            {{row.fieldEquipment}}
                                        </td>
                                        <td [ngStyle]="{color: '#1A6DDD',cursor: row.canEdit?'pointer':''}" (click)="row.canEdit?editItemPage('在途','onlineNumber',row):''" [title]="row.canEdit?'点击编辑':''">
                                            {{row.onlineNumber}}
                                        </td>
                                        <td>
                                            {{row.totalNum}}
                                        </td>
                                        <td [ngStyle]="{color: '#1A6DDD',cursor: row.canEdit?'pointer':''}" (click)="row.canEdit?editItemPage('预计安装量','expectedNum',row):''" [title]="row.canEdit?'点击编辑':''">
                                            {{row.expectedNum}}
                                        </td>
                                        <td>
                                            {{row.installedRatio}}
                                        </td>
                                        <td [ngStyle]="{color: '#1A6DDD',cursor: row.canEdit?'pointer':''}" (click)="row.canEdit?editItemPage('天气','weather',row):''" [title]="row.canEdit?'点击编辑':''">
                                            {{row.weather}}
                                        </td>
                                        <td [ngStyle]="{color: '#1A6DDD',cursor: row.canEdit?'pointer':''}" (click)="row.canEdit?editItemPage('现场人数','peopleNumber',row):''" [title]="row.canEdit?'点击编辑':''">
                                            {{row.peopleNumber}}
                                        </td>
                                        <td>{{row.installer}}</td>
                                        <td>{{row.userName}}</td>
                                        <td [ngStyle]="{color: '#1A6DDD',cursor: row.canEdit?'pointer':''}" (click)="row.canEdit?editItemPage('代维人员','maintenanceStaff',row):''" [title]="row.canEdit?'点击编辑':''">
                                            {{row.maintenanceStaff}}
                                        </td>
                                        <td [ngStyle]="{color: '#1A6DDD',cursor: row.canEdit?'pointer':''}" (click)="row.canEdit?editItemPage('备注','remark',row):''" [title]="row.canEdit?'点击编辑':''">
                                            {{row.remark}}
                                            <span *ngIf="row.remark && row.maintenanceMatters">,</span>
                                            <span *ngIf="row.maintenanceMatters">APP[{{row.maintenanceMatters}}]</span>
                                        </td>
                                        <td [ngStyle]="{color: '#1A6DDD',cursor: row.canEdit?'pointer':''}" (click)="row.canEdit?editItemPage('项目名称','projectName',row):''" [title]="row.canEdit?'点击编辑':''">
                                            {{row.projectName}}
                                        </td>
                                        <td [ngStyle]="{color: '#1A6DDD',cursor: row.canEdit?'pointer':''}" (click)="row.canEdit?editItemPage('地区','area',row):''" [title]="row.canEdit?'点击编辑':''">
                                            {{row.area}}
                                        </td>
                                        <td>{{row.date}}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div style="height: 60px;line-height: 60px;text-align: center;color: #ccc;">
                            <span *ngIf="tableData.length > 0">共{{tableData.length}}条数据</span>
                            <span *ngIf="tableData.length == 0">暂无数据</span>
                        </div>
                        <!--<div class="table-fix clearfix">
							<paginator [totalRecords]="totalCount"
						           [rows]="pageSize"
						           [currentPage]="curPage - 1"
						           (onPageChange)="paginate($event)">
							</paginator>
							<button type="button" class="btn default refresh_btn" (click)="refresh()"><i class="fa fa-refresh"></i></button>
						</div>-->
                    </div>
                </div>
            </div>
        </div>
    </sa-widgets-grid>
    <!-- 编辑    弹窗-->
    <div id="projectDailyModal" class="modal fade" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" (click)="projectDailyCancel()" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">项目日报-编辑</h4>
                </div>
                <div class="modal-body">
                    <div class="row form-horizontal">
                        <div class="form-group col-xs-12">
                            <label class="col-xs-2 control-label">安装点</label>
                            <div class="col-xs-10">
                                <input class="form-control" type="text" disabled [(ngModel)]='projectDailyFrom.companyName' name='companyName' placeholder="安装点" />
                            </div>
                        </div>
                        <div class="form-group col-xs-12">
                            <label class="col-xs-2 control-label">安装数量[今天]</label>
                            <div class="col-xs-10">
                                <input class="form-control" type="text" disabled [(ngModel)]='projectDailyFrom.installedNum' name='installedNum' placeholder="安装数量" />
                            </div>
                        </div>
                        <div class="form-group col-xs-12">
                            <label class="col-xs-2 control-label">维修数量</label>
                            <div class="col-xs-10">
                                <input class="form-control" type="text" disabled [(ngModel)]='projectDailyFrom.repairsNum' name='repairsNum' placeholder="维修数量" />
                            </div>
                        </div>
                        <div class="form-group col-xs-12">
                            <label class="col-xs-2 control-label">现场设备</label>
                            <div class="col-xs-10">
                                <input class="form-control" type="number" [(ngModel)]='projectDailyFrom.fieldEquipment' name='fieldEquipment' placeholder="现场设备" />
                            </div>
                        </div>

                        <div class="form-group col-xs-12">
                            <label class="col-xs-2 control-label">在途</label>
                            <div class="col-xs-10">
                                <input class="form-control" type="number" [(ngModel)]='projectDailyFrom.onlineNumber' name='onlineNumber' placeholder="在途" />
                            </div>
                        </div>
                        <div class="form-group col-xs-12">
                            <label class="col-xs-2 control-label">已安装量[总数]</label>
                            <div class="col-xs-10">
                                <input class="form-control" type="text" disabled [(ngModel)]='projectDailyFrom.totalNum' name='totalNum' placeholder="已安装" />
                            </div>
                        </div>
                        <div class="form-group col-xs-12">
                            <label class="col-xs-2 control-label">预计安装量</label>
                            <div class="col-xs-10">
                                <input class="form-control" type="number" [(ngModel)]='projectDailyFrom.expectedNum' name='expectedNum' placeholder="预计安装量" />
                            </div>
                        </div>
                        <div class="form-group col-xs-12">
                            <label class="col-xs-2 control-label">天气</label>
                            <div class="col-xs-10">
                                <input class="form-control" type="text" [(ngModel)]='projectDailyFrom.weather' name='weather' placeholder="天气" />
                            </div>
                        </div>
                        <div class="form-group col-xs-12">
                            <label class="col-xs-2 control-label">现场人数</label>
                            <div class="col-xs-10">
                                <input class="form-control" type="number" [(ngModel)]='projectDailyFrom.peopleNumber' name='peopleNumber' placeholder="现场人数" />
                            </div>
                        </div>
                        <div class="form-group col-xs-12">
                            <label class="col-xs-2 control-label">安装人员</label>
                            <div class="col-xs-10">
                                <input class="form-control" type="text" [(ngModel)]='projectDailyFrom.installer' name='installer' placeholder="安装人员" />
                            </div>
                        </div>
                        <div class="form-group col-xs-12">
                            <label class="col-xs-2 control-label">代维人员</label>
                            <div class="col-xs-10">
                                <input class="form-control" type="text" [(ngModel)]='projectDailyFrom.maintenanceStaff' name='maintenanceStaff' placeholder="代维人员" />
                            </div>
                        </div>
                        <div class="form-group col-xs-12">
                            <label class="col-xs-2 control-label">备注</label>
                            <div class="col-xs-10">
                                <input class="form-control" type="text" [(ngModel)]='projectDailyFrom.remark' name='remark' placeholder="备注" />
                            </div>
                        </div>
                        <div class="form-group col-xs-12">
                            <label class="col-xs-2 control-label">项目名称</label>
                            <div class="col-xs-10">
                                <input class="form-control" type="text" [(ngModel)]='projectDailyFrom.projectName' name='projectName' placeholder="项目名称" />
                            </div>
                        </div>
                        <div class="form-group col-xs-12">
                            <label class="col-xs-2 control-label">地区</label>
                            <div class="col-xs-10">
                                <input class="form-control" type="text" [(ngModel)]='projectDailyFrom.area' name='area' placeholder="地区" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" (click)="projectDailyCancel()">取消</button>
                    <button type="button" class="btn btn-primary" (click)="projectDailySubmit()">确认</button>
                </div>
            </div>
        </div>
    </div>
    <!--编辑  end-->

    <!-- 单项编辑   弹窗-->
    <section id="itemModal" class="modal" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" (click)="itemModalClose()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">{{itemPageForm.title}} - 编辑</h4>
                </div>
                <div class="modal-body">
                    <div class="row form-horizontal">
                        <div class="form-group col-xs-12">
                            <label class="col-xs-2 control-label">{{itemPageForm.title}}</label>
                            <div class="col-xs-10">
                                <input class="form-control" type="text" [(ngModel)]='projectDailyFrom[itemPageForm.key]' [attr.name]='itemPageForm.key' [attr.placeholder]="itemPageForm.title" />
                            </div>
                        </div>

                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" (click)="itemModalClose()">取消</button>
                    <button type="button" class="btn btn-primary" (click)="itemModalSubmit()">确认</button>
                </div>
            </div>
        </div>
    </section>
    <!-- 图片查看 弹窗end-->
</div>
<style type="text/css">
    .picture {
        min-height: 100px;
        width: 100%;
        height: auto;
    }

    .alert-flag td {
        color: red !important;
    }

    .arrowIcon .fa-caret-right{
        transition: all .3s;
    }
    .arrowIcon .fa-caret-right.down{
        transform: rotate(90deg);
    }
</style>